import { View, Input } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useImmer } from "use-immer";
import { AddressInput } from "@/apis/__generated/model/static";
import { api } from "@/utils/api-instance";
import "./address-save.scss";

export default function AddressSave() {
  const [address, setAddress] = useImmer<AddressInput>({
    details: "",
    houseNumber: "",
    latitude: 0,
    longitude: 0,
    phoneNumber: "",
    realName: "",
    top: false,
  });
  // 获取到经纬度
  Taro.authorize({
    scope: "scope.userLocation",
    success() {
      Taro.getLocation({
        success: (res) => {
          // 编辑时不需要获取当前地址
          if (!address.id) {
            setAddress((draft) => {
              draft.latitude = res.latitude;
              draft.longitude = res.longitude;
            });
          }
        },
      });
    },
  });
  const chooseAddress = () => {
    Taro.chooseLocation({
      success(result) {
        setAddress((draft) => {
          console.log(result);
          draft.details = result.address;
          draft.latitude = result.latitude;
          draft.longitude = result.longitude;
        });
      },
    });
  };

  // 提交表单
  const submit = () => {
    api.addressForFrontController.save({ body: address }).then(() => {
      Taro.showToast({ title: "提交成功", icon: "success" });
      Taro.navigateBack();
    });
  };
  // 编辑回显
  Taro.useLoad(({ id }) => {
    if (id) {
      api.addressForFrontController.findById({ id: id }).then((res) => {
        setAddress(res);
      });
    }
  });
  return (
    <View className="address-save">
      <View className="address-wrapper">
        <View className="address">
          <View className="btn" onClick={chooseAddress}>
            去选择地址
          </View>
          <View className="form">
            <View className="form-item">
              <View className="label">地址：</View>
              <View className="input">
                <Input
                  placeholder="请输入地址"
                  value={address.details}
                  onInput={(event) => {
                    setAddress((draft) => {
                      draft.details = event.detail.value;
                    });
                  }}
                ></Input>
              </View>
            </View>
            <View className="form-item">
              <View className="label">门牌号：</View>
              <View className="input">
                <Input
                  placeholder="请输入门牌号"
                  value={address.houseNumber}
                  onInput={(event) => {
                    setAddress((draft) => {
                      draft.houseNumber = event.detail.value;
                    });
                  }}
                ></Input>
              </View>
            </View>
            <View className="form-item">
              <View className="label">姓名：</View>
              <View className="input">
                <Input
                  placeholder="请输入姓名"
                  value={address.realName}
                  onInput={(event) => {
                    setAddress((draft) => {
                      draft.realName = event.detail.value;
                    });
                  }}
                ></Input>
              </View>
            </View>
            <View className="form-item">
              <View className="label">电话：</View>
              <View className="input">
                <Input
                  placeholder="请输入电话"
                  value={address.phoneNumber}
                  onInput={(event) => {
                    setAddress((draft) => {
                      draft.phoneNumber = event.detail.value;
                    });
                  }}
                ></Input>
              </View>
            </View>
            <View className="submit" onClick={submit}>
              保存地址
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
